<template>
  <div>
      <h1 style="text-align:center;">地图</h1>  
      <div>
        <div id="map">

        </div>
      </div> 
  </div>
</template>

<script>
//这样不行
// import echarts from 'echarts'
//用另一种一种导入方式（所有导出的东西我都导入进来）
import * as echarts from 'echarts'
import china from '@/geo/china.json'
import axios from 'axios'

export default {
  data () {
    return {
       item: {}    
      }
    },
  mounted(){
 
    
  },
  methods: {
      getNum() {
        axios('https://api.i-lynn.cn/college').then(data => {
            //    console.log( data.data);
            //排序 从大到小
            let arr = data.data.list.sort((obj1,obj2) => {
                return obj2.counts - obj1.counts
            })
            // console.log(arr[0]);
            //高亮显示学校数量最多的的城市
            this.item = {
                selected: true,
                name: arr[0].area
            }
            const myChart = echarts.init(document.querySelector('#map'))
            echarts.registerMap('china',china)
            let option = {
                geo: {
                map: 'china',
                //缩放比例
                zoom: 1.3,
                label:{
                    show: true
                },
                //对指定区域进行设置
                regions:[
                    
                        // {
                        // name:'河北省',
                        // //该区域是否被选中
                        // selected: true 
                        // }
                        this.item
                    
                ],
                //区域颜色
                itemStyle: {
                    areaColor: '#00f'
                },
                //移入高亮颜色
                emphasis: {
                    disabled: false,
                    itemStyle: {
                        areaColor: '#f0f'
                    },
                }
                }
            }

             myChart.setOption(option)

        })
      }  
    },
    created() {
        this.getNum()
    }
}
</script>

<style lang="scss" scoped>
    #map{
        width: 900px;
        height: 800px;
    }
</style>
